<template>
	<view class="page-container">
		<u-sticky>
			<view class="header">
				<view class="header-top">
					<view class="header-top-left">
						<view class="header-top-left-icon">
							<u-icon name="arrow-left" color="#000" size="44rpx" @click="onBack()" bold></u-icon>
						</view>
						<image class="header-top-left-titleImage" src="@/static/index/native-gameplay/headerTitle.png"
							mode="aspectFit">
						</image>
						<view class="header-top-left-address">
							<view class="header-top-right-location"> 淮安市 </view>
						</view>
						<image class="clickDown" src="@/static/index/native-gameplay/down.png" mode=""></image>
					</view>
					<view class="header-top-right">
						<view class="weather-left">
							33
						</view>
						<view class="weather-middle">
							<view class="weather-middle-top">
								/28℃
							</view>
							<view class="weather-middle-bottom">
								烈日炎炎
							</view>
						</view>

						<view class="weather-right">
							<image src="/static/index/native-gameplay/SunnyDay.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="middle-search">
					<u--input class="middle-search-ipt" placeholder="搜索更多景点、美食、活动等" prefixIcon="search"
							prefixIconStyle="font-size: 44rpx;color: #4D4D56;padding:0 20rpx 0 30rpx"
							placeholderStyle="font-size: 26rpx;color: #4D4D56;font-weight:400" border="none"></u--input>
					<!-- <view class="middle-search-box">
						<view class="middle-search-box-top">
							<u-icon name="search" color="#000" size="22"></u-icon>
						</view>
						<view class="">
							搜索更多景点、美食、活动等
						</view>
					</view> -->
				</view>

				<!-- 热门标签 -->
				<!-- <view class="PopularTags">
					<u-scroll-list :indicator="false" style="padding-bottom: 0;">
						<view v-for="(item, index) in list" :key="index">
							<view class="PopularTags-tab">
								{{item.name}}
							</view>
						</view>
					</u-scroll-list>
				</view> -->
			</view>
		</u-sticky>

		<!-- 1. 顶部堆叠轮播 -->
		<view class="summer-plan-swiper">
			<u-swiper :list="summerPlanImages" height="160" imgMode="aspectFill" radius="10" :autoplay="true" circular
				:indicator="true" indicatorMode="dot" @click="navigateToBanner" :lazy-load="true"
				:load-when-needed="true"></u-swiper>
			<view class="swiper-gradient-transition"></view>
		</view>

		<!-- 标签选项卡 -->

		<u-sticky offset-top="106">
			<view class="tabsList">
				<view class="tabsList-item" v-for="(item,index) in tabsList" :key="index"
					@click="handleClickTabs(item)">
					<view class="tabsList-item-img">
						<image :src="item.selected ? item.imgUrl : item.imgUrl_hidden" mode=""></image>
						<!-- <image :src="item.imgUrl_hidden" mode=""></image> -->
					</view>
					<view class="tabsList-item-title"
						:class="item.selected ? 'tabsList-item-title-show' : 'tabsList-item-title-hidden'">
						{{item.name}}
					</view>
					<view class="tabsList-item-top" v-if="item.selected">
						<image src="/static/index/native-gameplay/go.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="Explore-local-community-wrapper" @touchstart="handleContentTouchStart"
			@touchend="handleContentTouchEnd" @touchmove="handleContentTouchMove">
			<!-- 2. 下方瀑布流 (复用现有组件) -->
			<!-- 	<waterfall-posts :left-list="nativeGameplayData.leftList" :right-list="nativeGameplayData.rightList"
				:active-long-press-post-id="activeLongPressPostId" @itemClick="item => $emit('itemClick', item)"
				@like="item => $emit('like', item)" @longPress="id => $emit('longPress', id)"
				@touchEnd="$emit('touchEnd')" /> -->

			<waterfall-posts :left-list="nativeGameplayData.leftList" :right-list="nativeGameplayData.rightList"
				:active-long-press-post-id="activeLongPressPostId" @itemClick="navigateToPostDetail"
				@closeOverlay="handleCloseOverlay" @longPress="handleLongPress" @touchEnd="handleTouchEnd" />

			<!-- 3. 加载更多提示 -->
			<u-loadmore :status="nativeGameplayData.loadStatus" bg-color="#fff" />
		</view>

		<richPostDetail :show="showRichPostDetail" @close="showRichPostDetail = false" :postData="currentDetail" />
	</view>
</template>

<script>
	import WaterfallPosts from '@/components/index/waterfall-posts/waterfall-posts.vue';
	import {
		getPosts,
		getSoment
	} from '@/request/api.js';
	import config from '@/config/index.js';

	export default {
		components: {
			WaterfallPosts
		},
		props: {
			// 长按帖子的ID，用于显示特效
			activeLongPressPostId: {
				type: [String, Number],
				default: null
			},
		},
		// #ifdef APP-PLUS
		onBackPress(event) {
			if (plus.os.name === "Android") {
				// 获取弹窗状态 isPopup 1:打开
				const isPopup = uni.getStorageSync("isPopup");
				if (isPopup === "1") {
					// 关闭弹窗
					this.$refs.customPopup.close();
					// 阻止页面返回
					return true;
				}
			}
		},
		// #endif
		data() {
			return {
				summerPlanImages: [],
				tabsCardsHidden: true,
				nativeGameplayData: {
					leftList: [],
					rightList: [],
					page: 1,
					pageSize: 10,
					isLoading: false,
					loadStatus: 'loadmore'
				},
				swiperCurrent: 0, // 当前轮播图的索引
				tabsList: [{
						name: '综合',
						imgUrl: '/static/index/native-gameplay/first-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/first-hidden.png',
						selected: true
					},
					{
						name: '亲子游',
						imgUrl: '/static/index/native-gameplay/second-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/second-hidden.png',
						selected: false
					},
					{
						name: '携老游',
						imgUrl: '/static/index/native-gameplay/third-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/third-hidden.png',
						selected: false
					},
					{
						name: '青春游',
						imgUrl: '/static/index/native-gameplay/fourth-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/fourth-hidden.png',
						selected: false
					},
					{
						name: '自驾游',
						imgUrl: '/static/index/native-gameplay/fifth-show.png',
						imgUrl_hidden: '/static/index/native-gameplay/fifth-hidden.png',
						selected: false
					}
				],
				list: [{
						name: "西游乐园",
					},
					{
						name: "洪泽方特",
					},
					{
						name: "河下古镇",
					},
					{
						name: "文庙新天地",
					},
					{
						name: "淮安白马湖猴子",
					},
					{
						name: "西游乐园",
					},
					{
						name: "洪泽方特",
					},
					{
						name: "河下古镇",
					},
					{
						name: "文庙新天地",
					},
					{
						name: "淮安白马湖猴子",
					},
					{
						name: "西游乐园",
					},
					{
						name: "洪泽方特",
					},
					{
						name: "河下古镇",
					},
					{
						name: "文庙新天地",
					},
					{
						name: "淮安白马湖猴子",
					},
				],
				categoryId: 2,
				// 添加tab滚动位置记录
				tabScrollPositions: {
					2: 0, // 综合tab的滚动位置
					11: 0, // 亲子游tab的滚动位置
					12: 0, // 携老游tab的滚动位置
					13: 0, // 青春游tab的滚动位置
					14: 0 // 自驾游tab的滚动位置
				},
				tabHasScrolled: {
					2: false, // 综合tab是否滚动过
					11: false, // 亲子游tab是否滚动过
					12: false, // 携老游tab是否滚动过
					13: false, // 青春游tab是否滚动过
					14: false // 自驾游tab是否滚动过
				},
				isSwitchingTab: false, // 标记是否正在切换tab
				switchingFromCategoryId: 2, // 记录切换前的分类ID
				streetDiscussionOffsetTop: 172, // 吸顶位置
				contentTouchStartX: 0,
				contentTouchEndX: 0,
				contentTouchStartY: 0,
				contentTouchEndY: 0,
				contentTouchStartTime: 0,
				contentTouchEndTime: 0,
				isContentSwiping: false,
				tabSwitchCooldown: false,
				streetDiscussionFixed: false, // 街头热议是否吸顶
				// 动态计算吸顶的高度
				fixedHeaderHeight: 0, // 上方固定元素的总高度


				currentPageScrollTop: 0,
				// tabs吸顶的阈值
				tabsStickyThreshold: 170,
				// 记录tabs是否处于吸顶状态
				isTabsSticky: false,
				publicHeight: 0, //当前公共区域的滚动高度
				currentDetail: {},
				showRichPostDetail: false,

			};
		},

		onReady() {
			// 在初始化页面的时候调用即可
			this.calculateOffsetTop();
		},
		onLoad() {
			this.loadData(true);
			this.getBanner();
		},
		onReachBottom() {
			this.loadData(false);
		},
		filters: {
			// 格式化数字，例如 12500 -> 1.25万
			formatLikes(val) {
				if (val >= 10000) return (val / 10000).toFixed(2) + '万';
				if (val >= 1000) return (val / 1000).toFixed(1) + '千';
				return val;
			}
		},
		onPageScroll: function(e) {
			let scrollTop = e.scrollTop;
			this.currentPageScrollTop = scrollTop;
			// 记录头部轮播图距离顶部的距离，目前页面滚动到170的时候，tabs吸顶
			if (scrollTop < this.tabsStickyThreshold) {
				this.publicHeight = scrollTop
			} else {
				// 记录当前分类的滚动位置
				this.tabScrollPositions[this.categoryId] = scrollTop - Number(this.publicHeight);
			}

			// 更新tabs吸顶状态
			const wasSticky = this.isTabsSticky;
			this.isTabsSticky = scrollTop >= this.tabsStickyThreshold;


			// 标记当前分类是否已经滚动过
			if (scrollTop > 0) {
				this.tabHasScrolled[this.categoryId] = true;
			}
		},


		computed: {

		},
		methods: {
			// 获取状态栏高度
			getStatusbarHeight() {
				// uni-app 提供的方法获取状态栏高度
				const systemInfo = uni.getSystemInfoSync();
				return systemInfo.statusBarHeight || 0;
			},
			onBackPress(options) {
				// 优先关闭详情弹框
				if (options.from === 'backbutton' && this.showRichPostDetail) {
					// 需要触发组件的关闭
					this.showRichPostDetail = false
					return true;
				}

				return false;
			},
			handleCloseOverlay() {
				if (this.activeLongPressPostId !== null) {
					setTimeout(() => {
						this.activeLongPressPostId = null;
					}, 100);
				}
			},
			handleLongPress(postId) {
				this.activeLongPressPostId = postId;
			},
			handleTouchEnd() {},
			navigateToPostDetail(item) {
				this.currentDetail = item
				this.showRichPostDetail = true
			},
			// navigateToPostDetail(item) {
			// 	uni.navigateTo({
			// 		url: `/pages_sub/index/rich-post-detail/rich-post-detail`,
			// 		success: (res) => res.eventChannel.emit('acceptDataFromOpenerPage', {
			// 			item: item
			// 		})
			// 	});
			// },
			// 动态获取header的高度
			calculateOffsetTop() {
				this.$nextTick(() => {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);

						// 依次计算上方所有固定元素的高度
						query.select('.tabsList').boundingClientRect(rect => {
							console.log(rect.height, 'rect');
						}).exec();



					}, 800); // 增加延迟时间
				});
			},
			// 轮播图接口
			async getBanner() {
				try {
					const res = await getSoment();
					if (res.data && res.data.code === 200) {
						// 处理多种可能的数据格式
						let images = [];
						if (res.data.data.imgUrl) {
							// 如果是字符串，按逗号分割
							if (typeof res.data.data.imgUrl === 'string') {
								images = res.data.data.imgUrl
									.split(',')
									.map(url => url.trim())
									.filter(url => url && url.length > 0); // 过滤空字符串
								this.summerPlanImages = images
							}
						}

					}
				} catch (error) {
					console.error('获取轮播图失败:', error);
					// 出错时使用默认图片
					this.summerPlanImages = [{
							image: '/static/index/local/banner3.png'
						},
						{
							image: '/static/index/local/banner.png'
						}
					];
				}
			},
			navigateToBanner(item) {
				uni.navigateTo({
					url: `/pages_sub/common/general-activity/general-activity`,
					success: (res) => res.eventChannel.emit('acceptDataFromOpenerPage', {
						item: item
					})
				});
			},
			formatApiData(item) {
				const coverImage = (item.files && item.files.length > 0 && item.files[0].fileUrl) ? (item.files[0].fileUrl
					.startsWith('http') ? item.files[0].fileUrl : config.cdnURL + item.files[0].fileUrl) : '';
				const authorAvatar = item.avatar ? (item.avatar.startsWith('http') ? item.avatar : config.cdnURL + item
					.avatar) : '/static/demo/avatar_default.png';
				return {
					id: item.id,
					image: coverImage,
					title: item.content,
					author: {
						avatar: authorAvatar,
						name: item.nickName || '匿名用户'
					},
					isLiked: item.isLiked,
					likeCount: item.likeCount,
					hotness: item.viewCount,
					...item
				};
			},

			async loadData(isRefresh = false) {
				const data = this.nativeGameplayData;
				if (data.isLoading || (!isRefresh && data.loadStatus === 'nomore')) return;
				data.isLoading = true;
				data.loadStatus = 'loading';

				if (isRefresh) {
					data.page = 1;
					data.leftList = [];
					data.rightList = [];
				}

				const params = {
					userId: this.$store.state.userInfo.userId,
					queryType: 1,
					categoryId: this.categoryId,
					pageNum: data.page,
					pageSize: data.pageSize
				};

				try {
					const res = await getPosts(params);
					if (res.data && res.data.code === 200) {
						const formattedPosts = (res.data.rows || []).map(this.formatApiData);

						formattedPosts.forEach(post => {
							if (data.leftList.length <= data.rightList.length) data.leftList.push(post);
							else data.rightList.push(post);
						});

						const hasMore = formattedPosts.length === data.pageSize;
						data.loadStatus = hasMore ? 'loadmore' : 'nomore';
						if (hasMore) data.page++;
					} else {
						data.loadStatus = 'loadmore';
					}
				} catch (error) {
					data.loadStatus = 'loadmore';
				} finally {
					data.isLoading = false;
				}
			},
			// 监听轮播图切换
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},

			handleClickTabs(item) {
				// 获取点击的tab对应的分类ID
				let targetCategoryId;

				switch (item.name) {
					case '综合':
						targetCategoryId = 2;
						break;
					case '亲子游':
						targetCategoryId = 11;
						break;
					case '携老游':
						targetCategoryId = 12;
						break;
					case '青春游':
						targetCategoryId = 13;
						break;
					case '自驾游':
						targetCategoryId = 14;
						break;
					default:
						targetCategoryId = 2; // 默认为综合
				}

				// 如果点击的是当前已选中的tab，直接返回
				if (this.categoryId === targetCategoryId) return;

				// 标记正在切换tab
				this.isSwitchingTab = true;
				const previousCategoryId = this.categoryId; // 保存切换前的分类ID

				// 先更新选中状态
				this.tabsList.forEach((info) => {
					info.selected = false;
					if (info.name == item.name) {
						info.selected = true;
					}
				});

				// 更新分类ID
				this.categoryId = targetCategoryId;

				this.loadData(true);

				// 恢复目标tab的滚动位置
				this.$nextTick(() => {
					setTimeout(() => {
						let targetScrollTop = 0;

						// 如果目标tab已经滚动过，恢复其滚动位置
						if (this.tabHasScrolled[this.categoryId]) {
							// 使用统一的计算方式：基础吸顶阈值 + 保存的相对滚动位置
							targetScrollTop = this.tabsStickyThreshold + (this.tabScrollPositions[this
								.categoryId] || 0);
							// console.log(`恢复分类 ${this.categoryId} 的滚动位置:`, targetScrollTop);
						}
						// 如果目标tab未滚动过，但当前tabs是吸顶状态，则保持吸顶
						else if (this.isTabsSticky) {
							targetScrollTop = this.tabScrollPositions[this.categoryId] + this
								.tabsStickyThreshold;
							console.log('保持吸顶状态，滚动到:', targetScrollTop);
						}

						// 执行滚动
						if (targetScrollTop > 0) {
							uni.pageScrollTo({
								scrollTop: targetScrollTop,
								duration: 0
							});

							// 更新当前页面滚动位置
							this.currentPageScrollTop = targetScrollTop;
						}

						setTimeout(() => {
							this.isSwitchingTab = false;
						}, 100);
					}, 50);
				});
			},
			onBack() {
				uni.navigateBack()
			},
			handleContentTouchStart(event) {
				this.contentTouchStartX = event.touches[0].clientX;
				this.contentTouchStartY = event.touches[0].clientY; // 记录垂直坐标
				this.contentTouchStartTime = new Date().getTime();
				this.isContentSwiping = false;
			},

			// content区域触摸移动事件
			handleContentTouchMove(event) {
				// 可以在这里添加滑动过程中的效果
			},

			// content区域触摸结束事件
			handleContentTouchEnd(event) {
				this.contentTouchEndX = event.changedTouches[0].clientX;
				this.contentTouchEndY = event.changedTouches[0].clientY; // 记录垂直坐标
				this.contentTouchEndTime = new Date().getTime();
				this.handleContentSwipeGesture();
			},

			// 处理content区域的滑动手势
			handleContentSwipeGesture() {
				const swipeDistanceX = this.contentTouchEndX - this.contentTouchStartX;
				const swipeDistanceY = Math.abs(this.contentTouchEndY - this.contentTouchStartY); // 垂直方向移动距离
				const swipeTime = this.contentTouchEndTime - this.contentTouchStartTime;
				const swipeThreshold = 50;
				const verticalThreshold = 30; // 垂直方向阈值

				// 添加防抖控制
				if (this.tabSwitchCooldown) return;
				// 检查滑动距离是否超过阈值 且 滑动时间不太长（避免误判为滚动）
				// 新增条件：水平滑动距离必须大于垂直滑动距离，确保是水平滑动
				if (Math.abs(swipeDistanceX) > swipeThreshold &&
					swipeTime < 300 &&
					Math.abs(swipeDistanceX) > swipeDistanceY * 1.5) { // 水平滑动距离至少是垂直的1.5倍

					this.tabSwitchCooldown = true;
					this.isContentSwiping = true;

					if (swipeDistanceX > 0) {
						// 右滑 - 切换到上一个tab
						this.switchToPreviousTab();
					} else {
						// 左滑 - 切换到下一个tab
						this.switchToNextTab();
					}

					// 重置滑动状态
					setTimeout(() => {
						this.isContentSwiping = false;
						this.tabSwitchCooldown = false;
					}, 300);
				}
			},

			// 切换到上一个tab
			switchToPreviousTab() {
				const currentIndex = this.tabsList.findIndex(item => item.selected);
				if (currentIndex > 0) {
					const previousItem = this.tabsList[currentIndex - 1];
					this.handleClickTabs(previousItem);
				}
			},

			// 切换到下一个tab
			switchToNextTab() {
				const currentIndex = this.tabsList.findIndex(item => item.selected);
				if (currentIndex < this.tabsList.length - 1) {
					const nextItem = this.tabsList[currentIndex + 1];
					this.handleClickTabs(nextItem);
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background-color: #fff;
		width: 100%;
		// background: linear-gradient(to right,
		// 		rgba(255, 243, 208, 1) 0%,
		// 		rgba(223, 243, 255, 1) 100%);
	}

	.header {
		background-color: #fff;
		// background: linear-gradient(to right,
		// 		rgba(255, 243, 208, 1) 0%,
		// 		rgba(223, 243, 255, 1) 100%);

		box-sizing: border-box;
		padding-top: var(--status-bar-height);

		// background: url(/static/index/native-gameplay/play-backgroundImg.png) center/cover no-repeat;
		.header-top {
			margin: 0 27rpx;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center; // 垂直居中


			.header-top-left {
				display: flex;
				align-items: center;

				.header-top-left-icon {
					margin: 3rpx 0;
					display: flex; // 确保图标也居中
					align-items: center;
					justify-content: center;
				}

				.header-top-left-image {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.header-top-left-titleImage {
					margin-left: 10rpx;
					width: 190rpx;
					height: 50rpx;
				}

				.header-top-left-address {
					font-size: 30rpx;
					font-weight: 400;
					margin-left: 18rpx;
					display: flex;
					align-items: center;
				}

				.clickDown {
					width: 26rpx;
					height: 26rpx;
					margin-top: 0; // 移除原来的margin-top
					margin-left: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 26rpx;
						height: 26rpx;
					}
				}
			}

			.header-top-right {
				display: flex;
				align-items: center; // 垂直居中
				height: 50rpx;

				.weather-left {
					line-height: 50rpx;
					font-size: 40rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
					display: flex;
					align-items: center;
				}

				.weather-middle {
					margin-left: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: center; // 在容器中垂直居中

					.weather-middle-top {
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
						line-height: 24rpx;
						margin-bottom: 5rpx;
					}

					.weather-middle-bottom {
						font-size: 18rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
						line-height: 16rpx;
					}
				}

				.weather-right {
					margin-left: 10rpx;
					width: 42rpx;
					height: 46rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 42rpx;
						height: 46rpx;
					}
				}
			}
		}

		.middle-search {
			margin: 20rpx 27rpx 0 27rpx;
			padding-bottom: 20rpx;
			height: 60rpx;

			.middle-search-ipt {
				background-color: #fff;
				height: 60rpx;
				border-radius: 20rpx;
				border: 1px solid #ccc;
			}

			.middle-search-box {
				background-color: #fff;
				height: 60rpx;
				border-radius: 20rpx;
				display: flex;
				line-height: 60rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(77, 77, 86, 1);

				.middle-search-box-top {
					margin-top: 8rpx;
					margin: 8rpx 10rpx 8rpx 20rpx;
				}
			}
		}

		.PopularTags {
			margin: 20rpx;
			height: 40rpx;

			.PopularTags-tab {
				border-radius: 10rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: #fff;
				margin-right: 10rpx;
				padding: 0 10rpx;
				color: rgba(203, 203, 204, 1);
				font-size: 24rpx;
				font-weight: 400;
				text-align: center;
				border: 1px solid rgba(203, 203, 204, 1);
				min-width: 100rpx;
			}
		}
	}

	.tabsList {
		background-color: #fff;
		display: flex;
		height: 144rpx;
		/* 增加高度以容纳标题 */
		padding: 30rpx 30rpx 0;
		/* 添加底部边距 */
		gap: 20rpx;

		.tabsList-item {
			flex: 1;
			text-align: center;
			position: relative;

			.tabsList-item-img {
				width: 100%;
				height: 132rpx;
				/* 固定图片高度 */
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.tabsList-item-title {
				position: absolute;
				bottom: 14rpx;
				left: 0;
				right: 0;
				border-radius: 0 0 10rpx 10rpx;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 10rpx;
				box-sizing: border-box;
			}

			.tabsList-item-title-show {
				height: 56rpx;
				line-height: 56rpx;
				color: rgba(0, 0, 0, 1);
				font-size: 26rpx;
				font-weight: 700;
			}

			.tabsList-item-title-hidden {
				height: 56rpx;
				line-height: 56rpx;
				color: rgba(0, 0, 0, 1);
				font-size: 24rpx;
				font-weight: 400;
			}

			.tabsList-item-top {
				position: absolute;
				top: -20rpx;
				left: 88rpx;
				right: 0;

				image {
					width: 48rpx;
					height: 44rpx;
				}
			}
		}
	}

	// 8. 轮播图区域
	.summer-plan-swiper {
		position: relative;
		padding: 0 30rpx 20rpx;
		// background: linear-gradient(to right,
		// 		rgba(255, 243, 208, 1) 0%,
		// 		rgba(223, 243, 255, 1) 100%);
		background-color: #fff;
		// 9. 蒙层，覆盖到轮播图底部的padding20的区域 让这20rpx的区域颜色虚化
		.swiper-gradient-transition {
			height: 20rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to top,
					rgba(255, 255, 255, 0.7) 0%,
					rgba(255, 255, 255, 0.2) 100%);
		}
	}


	.Explore-local-community-wrapper {
		// 添加最小高度以保持容器稳定
		min-height: 100vh;
	}

	// 6. Tabs导航层级
	.tabsListRow-sticky-links {
		margin-top: 20rpx;
		padding: 10rpx 30rpx;
		background-color: #fff;

		.tabsListStyle {
			box-sizing: border-box;
			display: flex;
			width: 100%;
			height: 60rpx;

			.tabsListStyle-box {
				flex: 1;
				text-align: center;
				padding: 10rpx 0;
				cursor: pointer;
				position: relative; // 添加相对定位

				.tabsListStyle-name {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 27rpx;
					font-weight: 500;
					position: relative; // 确保文字在最上层
					z-index: 2; // 文字层级

					&.selected {
						font-weight: 800;
					}
				}

				.tabsListStyle-line {
					height: 40rpx;
					position: absolute; // 绝对定位
					top: 30rpx;
					left: 50%;
					transform: translateX(-50%); // 水平居中
					z-index: 1; // 背景图片层级，低于文字

					image {
						width: 114rpx;
						height: 20rpx;
						display: block; // 避免底部空隙
					}
				}
			}
		}


	}
</style>